.kuiInfoPanel {
  padding: 14px 20px 18px;
  line-height: $kuiLineHeight;
  border: 2px solid;
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--info {
  border-color: rgba($kuiInfoColor, 0.25); /* 1 */
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--success {
  border-color: rgba($kuiSuccessColor, 0.25); /* 1 */
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--warning {
  border-color: rgba($kuiWarningColor, 0.25); /* 1 */
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--error {
  border-color: rgba($kuiDangerColor, 0.25); /* 1 */
}

/**
 * 1. Align with first line of title text if it wraps.
 */
.kuiInfoPanelHeader {
  display: flex;
  align-items: baseline; /* 1 */
}

  .kuiInfoPanelHeader__icon {
    margin-right: 10px;
    font-size: $kuiFontSize;
    line-height: $kuiLineHeight;
  }

  .kuiInfoPanelHeader__title {
    font-size: $kuiFontSize;
    line-height: $kuiLineHeight;
    font-weight: $kuiFontWeightBold;
  }

.kuiInfoPanelBody {
  margin-top: $infoPanelVerticalRhythm;

  > * + * {
    margin-top: $infoPanelVerticalRhythm;
  }
}

.kuiInfoPanelBody__message {
  font-size: $kuiFontSize;
  line-height: $kuiLineHeight;
}
